const center = [104.1324, 36.92669]
var map = null, popup
var mapDom = document.getElementById('map')
map = new mapboxgl.Map({
    accessToken: 'pk.eyJ1IjoibHp1bml1anAwOCIsImEiOiJjajJqcmlrMTYwMDI2MzJuaXd0NmRtZTl5In0.eMIg2fpiFaDInq2YVE4_2A',
    container: mapDom, // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: center, // starting position [lng, lat]
    zoom: 3,
    doubleClickZoom: false,
    hash: false,
    localFontFamily: true,
    logoPosition: 'bottom-right'
});

map.on('load', () => {
    fetch("../data/capital.geojson").then(res => res.json()).then(res => {
        res = res.features
        res.forEach(r => {
            const coords = r.geometry.coordinates
            const dom = document.createElement('div')
            dom.classList.add('red-circle')
            new mapboxgl.Marker({
                element: dom
            }).setLngLat(coords).addTo(map);

            dom.onclick = function () {
                if(popup) popup.remove()
                popup = new mapboxgl.Popup({ closeOnClick: false })
                    .setLngLat(coords)
                    .setHTML("<h1>" + r.properties.name  + "</h1>")
                    .addTo(map);
            }
        })
    })
})